<!-- homepage part -->
<body>
    <div class="container-fluid">
        <div class="row clearfix">

          <div class="sidebar">

            <div class="sidebar-panel" id="scrollSpy-panel">
                <h3 class="sidebar-panel-title narrow-spacing-2">Visual Narrative Strategies</h3>
                <div class="sidebar-panel-group">
                    <a href="#" class="sidebar-btn scrollSpy-btn active">
                        <span class="scrollSpy-btn-symbol"></span>
                        <span class="scrollSpy-btn-stop"></span>
                        <span class="scrollSpy-btn-text">Emphasis (13)</span>
                    </a>
                    <a href="#" class="sidebar-btn scrollSpy-btn">
                        <span class="scrollSpy-btn-symbol"></span>
                        <span class="scrollSpy-btn-stop"></span>
                        <span class="scrollSpy-btn-text">Suspense (5)</span>
                    </a>
                    <a href="#" class="sidebar-btn scrollSpy-btn">
                        <span class="scrollSpy-btn-symbol"></span>
                        <span class="scrollSpy-btn-stop"></span>
                        <span class="scrollSpy-btn-text">Comparison (8)</span>
                    </a>
                </div>
            </div>

            <div class="sidebar-panel" id="filter-panel">
                <h3 class="sidebar-panel-title">Editorial Layers</h3>
                <div class="sidebar-panel-group">
                    <a href="#" class="sidebar-btn filter-btn">
                        <span class="filter-btn-symbol"></span>
                        <span class="filter-btn-text">Elements of Visualization</span>
                    </a>
                    <a href="#" class="sidebar-btn filter-btn">
                        <span class="filter-btn-symbol"></span>
                        <span class="filter-btn-text narrow-spacing-8">Elements added to Visualization</span>
                    </a>
                    <a href="#" class="sidebar-btn filter-btn">
                        <span class="filter-btn-symbol"></span>
                        <span class="filter-btn-text">Camera</span>
                    </a>
                    <a href="#" class="sidebar-btn filter-btn">
                        <span class="filter-btn-symbol"></span>
                        <span class="filter-btn-text">Timeline</span>
                    </a>
                </div>
            </div>

            </div>
            
            <div class="col column display-container" id="card-display">
                <!-- <div class="search-fail">(~_~)'`&nbsp;&nbsp;Sorry, nothing found.</div> -->
                <div class="emphasis">
                    <div class="display-reminder">
                        <div class="reminder-head">
                            <span class="reminder-symbol"></span>
                            <span class="reminder-title">Emphasis (13)</span>
                        </div>
                        <div class="reminder-desc">
                            Emphasis is one of the most-supported narrative strategies in data videos. It communicates coremessages by creating “look here” signals with visual hierarchy, i.e., visual contrast between colors, shapes,sizes, or movements.
                        </div>
                    </div>
                    <div class="row row-cols-2 row-cols-sm-3 row-cols-lg-4 display-collection">
                        <div class="card-inner">
                            <div class="card shadow front">
                                <div class="card-header" style="background: rgb(189, 160, 244);">
                                    <h4>Moving Forward</h4>
                                    <p>Show the Instinctive Behaviours</p>
                                </div>
                                <div class="card-frontImg inactive"><img class="card-img front-gif"
                                        src="./assets/front_gif_preview/front_1.gif"><img class="card-img front-prev"
                                        src="./assets/front_prev/static_1.jpg" style="opacity: 1;"></div>
                                <div class="card-body">
                                    <div class="card-subtitle">Approach : 01 Moving Forward</div>
                                    <p class="card-text">Characters walking or running forward.</p>
                                    <div class="card-subtitle">Purpose : 03 Show the Instinctive Behaviours</div>
                                    <p class="card-text">Show the innate instinctive behaviors of creatures, such as running, jumping,
                                        flying, swimming, etc.</p>
                                </div>
                                <div class="card-footer"><button class="btn btn-sm rounded-pill">Examples</button></div>
                            </div>
                            <div class="card shadow back">
                                <div class="card-header" style="background: rgb(189, 160, 244);">
                                    <h4>Moving Forward</h4>
                                    <p>Show the Instinctive Behaviours</p>
                                </div>
                                <div class="card-img-box position-relative">
                                    <div class="card-img carousel slide" id="eg-carousel-1" data-ride="carousel" data-interval="false">
                                        <div class="carousel-inner">
                                            <div class="carousel-item active"><img class="d-block"
                                                    src="./assets/back_gif_compressed/back_176.gif"></div>
                                            <div class="carousel-item"><img class="d-block" src="./assets/back_gif_compressed/back_313.gif">
                                            </div>
                                            <div class="carousel-item"><img class="d-block" src="./assets/back_gif_compressed/back_463.gif">
                                            </div>
                                        </div><a class="carousel-control-prev" href="#eg-carousel-1" role="button" data-slide="prev"><span
                                                class="carousel-control-prev-icon" aria-hidden="true"></span><span
                                                class="sr-only">previous</span></a><a class="carousel-control-next" href="#eg-carousel-1"
                                            role="button" data-slide="next"><span class="carousel-control-next-icon"
                                                aria-hidden="true"></span><span class="sr-only">next</span></a>
                                    </div>
                                    <div class="img-cover">
                                        <div class="mask position-absolute"></div><span class="img-overlay" type="button"></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="caption">
                                        <div><span>Designer: </span>Nancy Liang</div>
                                        <div><span>Year: </span>2016</div>
                                        <div><a href="https://www.duitang.com/blog/?id=520147825" target="_blank"
                                                class="text-decoration-none">URL</a></div>
                                    </div>
                                </div>
                                <div class="card-footer"><button class="btn btn-sm rounded-pill">Back to Front</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

      </div>
</body>